<template>
	<view class="leaveIndex">
		<u-button v-if="!value" type="primary" :plain="true" text="选择" @click="clickOption"></u-button>
		<view v-else class="viewBox">学校生活饮用水卫生管理制度</view>
		<!-- 弹出选择 -->
		<u-popup :show="show" closeOnClickOverlay @close="close">
			<view class="lineCon">
				<view class="itemLine" v-for="item in list" :key="item.id">
					<view class="icon">
						<u-icon name="bag-fill" color="#2979ff" size="22"></u-icon>
					</view>
					<view class="info">
						<view class="titles">{{item.goodsName}}</view>
						<view class="yy">
							<text class="tip">名称:</text>
							<text>学校生活饮用水卫生管理制度</text>
						</view>
						<view class="yy">
							<text class="tip">剩余库存:</text>
							{{item.remainingInventory}}
						</view>
						<view class="yy">
							<text class="tip">入库时间:</text>
							{{$u.timeFormat(item.collectionTime, 'yyyy-mm-dd')}}
						</view>
					</view>
					<view class="status">
						<u-button type="primary" :plain="true" text="选择" size="mini" @click="clickBtn(item)"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {formatDate} from '@/utils/formatTime.js'
	import dictTag from '@/components/common/dictTag.vue'
	import {getColumnGetByParentId} from '@/api/oa/column/index.js'
	export default {
		model:{
			prop: 'value', // 此处的value为父组件v-model绑定数据
			event: 'input' // 派发事件，事件名只能是input，否则无法生效
		},
		components:{
			dictTag
		},
		props:{
			parentId:'',
			value:''
		},
		data() {
			return {
				queryParams:{
					parentId: 1,
				},
				list:[],
				isLast:false,
				
				// 弹框展示
				show:false,
			};
		},
		methods:{
			// 获取列表
			async getlist(){
				let listInfo = await getColumnGetByParentId({
					columnId:this.parentId
				});
				let list = listInfo.data;
				this.list = list;
			},
			// 点击跳转详情
			clickBtn(data){
				this.show = false;
				this.$emit('input',data);
			},
			// 点击选择
			clickOption(){
				this.show = true;
			},
			close(){
				this.show = false;
			},
		},
		onShow() {
			this.list = [];
			this.getlist();
		},
		mounted() {
			this.list = [];
			this.getlist();
		}
		// onReachBottom(){
		// 	console.log('触底了！')
		// 	// this.queryParams.pageNo = this.queryParams.pageNo + 1;
		// 	this.getlist()
		// },
	}
</script>

<style lang="less" scoped>
.leaveIndex{
	width: 100%;
	height: 100%;
	.lineCon{
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
	}
	.itemLine{
		width: 100%;
		height: auto;
		border-bottom: 1rpx solid #ddd;
		box-sizing: border-box;
		background-color: rgba(255, 255, 255,0.6);
		display: flex;
		align-items: flex-start;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		.icon{
			flex: none;
		}
		.info{
			flex: 1;
			margin-left: 20rpx;
			.titles{
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
			}
			.yy{
				font-size: 26rpx;
				color: #333;
				margin-top: 10rpx;
				display: flex;
				align-items: center;
				.tip{
					margin-right: 20rpx;
				}
			}
		}
		.status{
			height: 100%;
			flex: none;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.viewBox{
		height: 100%;
		display: flex;
		align-items: center;
	}
}
</style>
